<template>
    <div class="user-info">
        <!--<span class=" icon iconfont icon-yonghuguanli" style="background-color: #20a0ff;border-radius: 50%;height: 25px;width: 25px;display: inline-block;text-align: center;line-height: 25px;margin-right: 3px"></span>-->
        <el-dropdown trigger="click" @command="handleCommand">

              <span class="el-dropdown-link" >
                 欢迎 :   weizq
                <i class="el-icon-caret-bottom"></i>
                </span>
            <el-dropdown-menu slot="dropdown">
                <!--<el-dropdown-item ><span class="iconfont icon-bangzhu" style="font-size: 12px;margin-right: 5px"></span><a target="_blank" href="http://tsp.dearcc.net/help/" style="color: #5b6a80">帮助手册</a></el-dropdown-item>-->
                <el-dropdown-item command="UpdatePassword"><span class="el-icon-setting"></span>修改密码</el-dropdown-item>
                <el-dropdown-item command="loginout"><span class="el-icon-remove"></span>退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    import Vue from 'vue'

export default {
  name: 'user-info',
  computed: {
    userInfo () {
      return this.$store.state.userInfo || {}
    }
  },
  data () {
    return {

    }
  },
    created () {
      // Vue.eventEmitter.on('log_out', () => {
      //     let flag = true
      //     if (flag) {
      //         this.$message.error('token失效，请重新登陆')
      //         flag = false
      //     }
      //     setTimeout(() => {
      //         flag = true
      //         this.$router.replace('login')
      //     }, 500)
      // })
    },
  methods: {
    handleCommand (command) {
      switch (command) {
        case 'loginout' :
          this.loginOut()
          break
        case 'UpdatePassword':
          this.$router.push({
            path: 'updatePassword',
            query: {
              userId: ""
            }
          })
          break
      }
    },
    openMessage (message, confirmText, doit) {
      this.$confirm(message, '提示', {
        cancelButtonText: '取消',
        confirmButtonText: confirmText
      }).then(() => {
        doit()
      }).catch(() => {
      })
    },
    loginOut () {
      this.openMessage('您确定要退出吗？', '确定', () => {
        this.$router.replace('login')
        // this.$store.dispatch('logout')
        //   .then(rs => {
        //     history.go(0)
        //     this.$message({ type: 'success', message: '退出成功' })
        //     window.localStorage.clear()
        //     setTimeout(() => {
        //       this.$router.replace('login')
        //     }, 500)
        //   })
        //   .catch(err => {
        //     if (err.code === 20107) {
        //       this.$message({
        //         showClose: true,
        //         message: '账号校验失败，请重新登录',
        //         type: 'error'
        //       })
        //       setTimeout(() => {
        //         this.$router.replace('login')
        //       }, 500)
        //     } else {
        //         this.$message.error(err.message)
        //         setTimeout(() => {
        //             this.$router.replace('login')
        //         }, 500)
        //     }
        //   })
      })
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
    @import "../assets/css/config";
    .el-popper[x-placement^="bottom"] {
        margin-top: 19px;
    }
    .el-dropdown-menu__item {
        [class^="el-icon-"] {
            margin-right: 5px;;
        }
    }
    .user-info {
        float: right;
        padding: 38px 15px 0 60px;
        .el-dropdown {
            color: #000;
            cursor: pointer;
        }
    }
</style>
